<template>
  <div class="max-w-3xl mx-auto bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">比重计温度校正</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500">
        <p>根据测量温度调整比重计读数，得到校正后的比重值。</p>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
        <!-- 测量比重 -->
        <div>
          <label for="measured-gravity" class="block text-sm font-medium text-gray-700">
            测量比重 (SG)
          </label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="measured-gravity"
              id="measured-gravity"
              v-model="measuredGravity"
              step="0.001"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              placeholder="1.048"
              @input="calculateCorrection"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">SG</span>
            </div>
          </div>
        </div>

        <!-- 测量温度 -->
        <div>
          <label for="measured-temp" class="block text-sm font-medium text-gray-700">测量温度</label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="measured-temp"
              id="measured-temp"
              v-model="measuredTemp"
              step="0.1"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              placeholder="25.0"
              @input="calculateCorrection"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">°C</span>
            </div>
          </div>
        </div>

        <!-- 校准温度 -->
        <div>
          <label for="calibration-temp" class="block text-sm font-medium text-gray-700">
            校准温度
            <span class="text-gray-500">(比重计标定温度)</span>
          </label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="calibration-temp"
              id="calibration-temp"
              v-model="calibrationTemp"
              step="0.1"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              placeholder="20.0"
              @input="calculateCorrection"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">°C</span>
            </div>
          </div>
        </div>

        <!-- 糖度估算 -->
        <div>
          <label class="block text-sm font-medium text-gray-700">
            糖度估算
            <span class="text-gray-500">(校正后)</span>
          </label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="text"
              disabled
              :value="platoEstimate"
              class="bg-gray-50 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              placeholder="0.0"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">°P</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 校正结果 -->
      <div class="mt-6">
        <div class="rounded-md bg-blue-50 p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <BeakerIcon class="h-5 w-5 text-blue-400" aria-hidden="true" />
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-blue-800">校正后比重</h3>
              <div class="mt-2 text-sm text-blue-700">
                <p class="font-medium text-2xl">{{ correctedGravity }}</p>
                <p class="mt-2" v-if="correction !== 0">
                  校正值: {{ correction > 0 ? '+' : '' }}{{ correction }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 计算公式说明 -->
      <div class="mt-6">
        <h4 class="text-sm font-medium text-gray-900">计算公式</h4>
        <div class="mt-2 text-sm text-gray-500 space-y-1">
          <p>校正后比重 = 测量比重 + 温度校正值</p>
          <p>温度校正值 = f(测量温度, 校准温度, 测量比重)</p>
          <p>使用 Terrill 公式进行温度校正计算</p>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-yellow-800">使用说明</h3>
            <div class="mt-2 text-sm text-yellow-700">
              <ul class="list-disc pl-5 space-y-1">
                <li>测量比重范围：0.990-1.160 SG</li>
                <li>温度范围：0-40°C</li>
                <li>大多数比重计的校准温度为 15.56°C (60°F) 或 20°C (68°F)</li>
                <li>请查看您的比重计上标注的校准温度</li>
                <li>温度越接近校准温度，测量越准确</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { BeakerIcon } from '@heroicons/vue/24/outline'

const measuredGravity = ref('')
const measuredTemp = ref('')
const calibrationTemp = ref('20.0') // 默认20°C
const correctedGravity = ref('0.000')
const correction = ref(0)

// 使用 Terrill 公式计算温度校正
function calculateTempCorrection(sg, temp, calTemp) {
  // 将温度转换为华氏度
  const tempF = (temp * 9/5) + 32
  const calTempF = (calTemp * 9/5) + 32
  
  // Terrill 公式系数
  const A = -0.000134
  const B = 0.00000256
  const C = 0.00000002
  
  // 计算校正值
  const correction = -A * (tempF - calTempF) + 
                    B * (tempF - calTempF) * (Math.pow(sg, 0.5) - 1) +
                    C * (tempF - calTempF) * (sg - 1)
  
  return correction
}

// 比重转柏拉图度
function sgToPlato(sg) {
  return (-1 * 616.868) + (1111.14 * sg) - (630.272 * Math.pow(sg, 2)) + (135.997 * Math.pow(sg, 3))
}

// 计算校正后的比重
function calculateCorrection() {
  if (!measuredGravity.value || !measuredTemp.value || !calibrationTemp.value ||
      isNaN(measuredGravity.value) || isNaN(measuredTemp.value) || isNaN(calibrationTemp.value)) {
    correctedGravity.value = '0.000'
    correction.value = 0
    return
  }

  const sg = parseFloat(measuredGravity.value)
  const temp = parseFloat(measuredTemp.value)
  const calTemp = parseFloat(calibrationTemp.value)

  // 输入验证
  if (sg < 0.99 || sg > 1.16 || temp < 0 || temp > 40 || calTemp < 0 || calTemp > 40) {
    correctedGravity.value = '0.000'
    correction.value = 0
    return
  }

  // 计算温度校正值
  const tempCorrection = calculateTempCorrection(sg, temp, calTemp)
  correction.value = parseFloat(tempCorrection.toFixed(3))

  // 计算校正后比重
  const corrected = sg + tempCorrection
  correctedGravity.value = corrected.toFixed(3)
}

// 计算糖度估算
const platoEstimate = computed(() => {
  if (correctedGravity.value === '0.000') return '0.0'
  const plato = sgToPlato(parseFloat(correctedGravity.value))
  return plato.toFixed(1)
})

// 监听输入变化
watch([measuredGravity, measuredTemp, calibrationTemp], calculateCorrection)
</script>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style> 